<!--
 * @Author: Vi卡农
 * @Date: 2020-05-14 17:10:52
 * @LastEditTime: 2020-05-15 17:35:06
 * @Description: -用户详情-
 * @FilePath: \cshf_admin\src\views\modules\sys\userdetails.vue
 -->
<template>
  <div class="userdetails">
    <el-row>
      <el-col :span="18">
        <span class="title_span">用户管理 - 用户详情</span>
      </el-col>
      <el-col :span="5" style="text-align:right">
        <!-- <el-button
          v-if="MaintainType&&inputState==true&&$hasPermission('project:projectinfo:update')"
          type="text"
          icon="el-icon-edit"
          @click="inputState=false"
        >修改</el-button>
        <el-button
          v-if="inputState==false"
          type="text"
          icon="el-icon-warning"
          @click="inputState=true"
        >取消</el-button>
        <el-button
          v-if="MaintainType&&inputState==false&&$hasPermission('project:projectinfo:update')"
          type="text"
          icon="el-icon-folder-checked"
          @click="update"
        >保存</el-button>-->
      </el-col>
    </el-row>

    <el-card class="box-card" style="margin-top:10px;">
      <el-row>
        <el-col :span="10">
          <div class="Properties">
            <div class="PropertiesIMG">
              <img v-if="dataForm.headUrl" :src="dataForm.headUrl" alt />
              <div v-else class="colorGray userimgNull">暂无头像</div>
            </div>
            <div class="PropertiesName">
              <div class="marg_t15 fontColor1">
                姓名：
                <span>{{dataForm.realName}}</span>
              </div>
              <div class="marg_t15 fontColor1">
                员工账号：
                <span>{{dataForm.username}}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="marg_t15 fontColor1">
            性别：
            <span v-if="dataForm.gender==0">男</span>
            <span v-if="dataForm.gender==1">女</span>
            <span v-if="dataForm.gender==2">保密</span>
          </div>
          <div class="marg_t15 fontColor1">
            职位：
            <span>{{dataForm.roleName}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="marg_t15 fontColor1">
            部门：
            <span>{{dataForm.deptName}}</span>
          </div>
          <div class="marg_t15 fontColor1">
            联系方式：
            <span>{{dataForm.mobile}}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div class="userdetailsBox marg_t15">
      <span class="card_title">基本信息</span>
      <ul class="cont_ul">
        <li class="list_background">
          <div>
            <span>经纪人编号：</span>
            <span>{{"CSHF - "+dataForm.number}}</span>
          </div>
          <div>
            <span>银行卡账户：</span>
            <span>{{dataForm.bankCard}}</span>
          </div>
          <div>
            <span>开户行：</span>
            <span>{{dataForm.bank}}</span>
          </div>
        </li>

        <li>
          <div>
            <span>婚否：</span>
            <span>{{dataForm.marriage}}</span>
          </div>
          <div>
            <span>生日：</span>
            <span>{{dataForm.birthday}}</span>
          </div>
          <div>
            <span>籍贯：</span>
            <span>{{dataForm.nativePlace}}</span>
          </div>
        </li>

        <li class="list_background">
          <div>
            <span>血型：</span>
            <span>{{dataForm.blood}}</span>
          </div>
          <div>
            <span>民族：</span>
            <span>{{dataForm.nation}}</span>
          </div>
          <div>
            <span>身份证号：</span>
            <span>{{dataForm.idNumber}}</span>
          </div>
        </li>
        <li>
          <div>
            <span>最高学历：</span>
            <span>{{dataForm.education}}</span>
          </div>
          <div>
            <span>毕业院校：</span>
            <span>{{dataForm.university}}</span>
          </div>
          <div>
            <span>专业：</span>
            <span>{{dataForm.major}}</span>
          </div>
        </li>
        <li class="list_background">
          <div>
            <span>户籍地址：</span>
            <span>{{dataForm.address}}</span>
          </div>
          <div>
            <span>现住地址：</span>
            <span>{{dataForm.currentAddress}}</span>
          </div>
          <div>
            <span>邮箱：</span>
            <span>{{dataForm.email}}</span>
          </div>
        </li>

        <li>
          <div>
            <span>紧急联系人：</span>
            <span>{{dataForm.emergencyUser}}</span>
          </div>
          <div>
            <span>关系：</span>
            <span>{{dataForm.relationship}}</span>
          </div>
          <div>
            <span>联系方式：</span>
            <span>{{dataForm.emergencyPhone}}</span>
          </div>
        </li>
        <li class="list_background">
          <div>
            <span>入司日期：</span>
            <span>{{dataForm.joinDate}}</span>
          </div>
          <div>
            <span>入职日期：</span>
            <span>{{dataForm.entryDate}}</span>
          </div>
          <div>
            <span>转正日期：</span>
            <span>{{dataForm.confirmationDate}}</span>
          </div>
        </li>
      </ul>
      <!-- <div class="zhengshu">
        <span class="title">所获证书：</span>
        <span v-for="(item,index) in certificateList">
          <el-image :src="item.url" :preview-src-list="getSrcList(index)"></el-image>
        </span>
      </div>-->
    </div>

    <el-card class="box-card usercard" style="margin-top:10px;">
      <div slot="header" class="clearfix">
        <span class="cardtitle">家庭状况</span>
      </div>
      <el-table :data="familyData" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="relationship" label="关系"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="birthday" label="生日"></el-table-column>
        <el-table-column prop="address" label="通讯地址/现住址"></el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card usercard" style="margin-top:10px;">
      <div slot="header" class="clearfix">
        <span class="cardtitle">升降级变动</span>
      </div>
      <el-table :data="positionData" stripe style="width: 100%">
        <el-table-column prop="type" label="变动类型"></el-table-column>
        <el-table-column prop="applyDate" label="申请日"></el-table-column>
        <el-table-column prop="agreeDate" label="生效日"></el-table-column>
        <el-table-column prop="ndeptName" label="现部门"></el-table-column>
        <el-table-column prop="nroleName" label="现职位"></el-table-column>
        <el-table-column prop="wages" label="待遇"></el-table-column>
        <el-table-column prop="social" label="社保"></el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card usercard" style="margin-top:10px;">
      <div slot="header" class="clearfix">
        <span class="cardtitle">奖惩记录</span>
      </div>
      <el-table :data="RewardsData" stripe style="width: 100%">
        <el-table-column prop="type" label="奖惩类型" width="220"></el-table-column>
        <el-table-column prop="dateTime" label="日期" width="220"></el-table-column>
        <el-table-column prop="content" label="奖项"></el-table-column>
      </el-table>
    </el-card>

    <div class="box_shadow" style="margin-top:10px;padding:0px 8px">
      <el-row>
        <el-col :span="12">
          <span class="card_title" style="width:180px;">证书图片</span>
        </el-col>
        <span class="float_r" style="margin:10px;">
          <el-button type="primary" @click="UploadImg">上传图片</el-button>
          <el-button type="primary" v-if="imglist.length>1" @click="deleteImage">批量删除</el-button>
        </span>
      </el-row>

      <div class="LP_imgList martop10">
        <div v-if="imglist.length<1" class="svgColor2 lih33 marg_t15">暂无</div>
        <el-checkbox-group v-if="MaintainType" v-model="checkList" class="House_img_check user_img">
          <el-checkbox :label="item.id" v-for="(item,index) in imglist" :key="index" :value="item">
            <div class="checkbox_div">
              <el-image :src="item.url" :preview-src-list="getSrcList(index)"></el-image>
            </div>
            <span class="colorGray float_l">{{item.title}}</span>
            <span class="colorGray float_r">--{{item.maintainName}}</span>
            <br />
            <span class="colorGray float_l">{{$getDictLabel("examine",item.examine)}}</span>
            <!-- <span class="Imgedit float_r" @click="ImgeditClick(item)">
              <svg class="icon-svg svgColor3 svgStyle2" aria-hidden="true">
                <use xlink:href="#edit2" />
              </svg>
            </span>-->
          </el-checkbox>
        </el-checkbox-group>
        <ul v-else>
          <li v-for="(item,index) in imglist" class="House_img_li" :key="index">
            <div class="House_img_li_div">
              <el-image :src="item.url" :preview-src-list="getSrcList(index)"></el-image>
            </div>
            <div class="House_img_li_title martop5">
              <span class="colorGray float_l">{{item.title}}</span>
              <span class="colorGray float_r">--{{item.maintainName}}</span>
            </div>
            <span class="colorGray float_l">{{$getDictLabel("examine",item.examine)}}</span>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog title="上传证书图片" :visible.sync="FYdialogVisible" width="30%" :destroy-on-close="true">
      <!-- <el-form ref="form" :model="FYimgUploadFrom" label-width="50px" label-position="top">
        <el-form-item label="选择图片"></el-form-item>
      </el-form>-->
      <el-upload
        class="upload-demo"
        ref="FJupload"
        action="/project/projectinfo/apartmentUpload"
        :file-list="fileListFY"
        :auto-upload="false"
        :limit="10"
        list-type="picture-card"
        :multiple="true"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FYdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="FJuploadFun" :loading="BtnLoading">点击上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      userId: this.$route.query.ID,
      userimg: "",
      dataForm: {},
      certificateList: [],
      familyData: [], //家庭
      positionData: [], //职位
      RewardsData: [], //奖惩
      MaintainType: true,
      checkList: [], //图片选中数组
      imglist: [], //图片显示数组
      previewImglist: [], //预览图片数组
      fileListFY: [],
      BtnLoading: false,
      // FYimgUploadFrom: {
      //   title: ""
      // },
      FYdialogVisible: false
    };
  },
  created() {
    this.getAll();
  },
  mounted() {},
  methods: {
    getAll() {
      this.getUserInfo();
      this.getfamilyData();
      this.getpositionData();
      this.getRewardsData();
      this.getimg();
    },
    //获取用户信息
    getUserInfo() {
      this.$http
        .get(`/sys/user/${this.userId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = res.data;
        })
        .catch(() => {});
    },
    //获取家庭状况
    getfamilyData() {
      let _this = this;
      this.$http
        .get(`/sys/sysuserfamily/list`, {
          params: {
            userId: _this.userId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.familyData = res.data;
        })
        .catch(() => {});
    },
    //获取升降级变动
    getpositionData() {
      let _this = this;
      this.$http
        .get(`/sys/sysuserposition/list`, {
          params: {
            userId: _this.userId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.positionData = res.data;
        })
        .catch(() => {});
    },
    //获取奖惩
    getRewardsData() {
      let _this = this;
      this.$http
        .get(`/sys/sysuserrewards/list`, {
          params: {
            userId: _this.userId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.RewardsData = res.data;
        })
        .catch(() => {});
    },

    //获取证书图片
    getimg() {
      let _this = this;
      _this.imglist = [];
      _this.previewImglist = [];
      this.$http
        .get("/sys/sysuserimage/list", {
          params: {
            userId: _this.userId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.imglist = res.data;
          for (let i = 0; i < _this.imglist.length; i++) {
            _this.previewImglist.push(_this.imglist[i].url);
          }
        })
        .catch(() => {});
    },
    //预览图片list
    getSrcList(index) {
      return this.previewImglist
        .slice(index)
        .concat(this.previewImglist.slice(0, index));
    },
    //点击上传合同图片
    UploadImg() {
      this.fileListFY = [];
      // this.FYimgUploadFrom = {
      //   userId: this.userId
      // };
      this.FYdialogVisible = true;
    },
    //确定上传证书图片
    FJuploadFun() {
      let _this = this;
      _this.BtnLoading = true;
      let formData = new FormData();
      for (let i = 0; i < this.$refs.FJupload.uploadFiles.length; i++) {
        formData.append("files", this.$refs.FJupload.uploadFiles[i].raw);
      }
      this.$http
        .post("/sys/sysuserimage/upload", formData, {
          params: {
            userId: _this.userId
          }
        })
        .then(({ data: res }) => {
          _this.BtnLoading = false;
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("上传成功！");
          _this.FYdialogVisible = false;

          _this.getimg();
        })
        .catch(() => {
          _this.BtnLoading = false;
        });
    },
    //删除合同图片
    deleteImage() {
      let _this = this;
      if (_this.checkList.length < 1) {
        this.$message({
          type: "info",
          message: "请选择要删除的图片"
        });
        return;
      }
      this.$confirm("您将批量删除选中的图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete(`/sys/sysuserimage`, {
              data: _this.checkList
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              _this.$message.success("删除成功！");
              _this.checkList = [];
              _this.getimg();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  watch: {
    $route(to, from) {
      if (to.name == "userdetails") {
        this.userId = this.$route.query.ID;
        this.getUserInfo();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.title_span {
  display: inline-block;
  font-size: 16px;
  color: rgb(116, 116, 116);
  line-height: 33px;
}
.Properties {
  height: 90px;
}
.PropertiesIMG {
  width: 90px;
  height: 100%;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.PropertiesIMG img {
  width: 100%;
  height: 100%;
}
.PropertiesName {
  float: left;
  margin-left: 20px;
}
.userimgNull {
  font-size: 18px;
  line-height: 90px;
  text-align: center;
  color: #d4d4d4;
}
.userdetailsBox {
  background: #ffffff;
  border-radius: 3px;
  color: #666666;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cont_ul {
    width: 100%;
    li {
      line-height: 50px;
      height: 50px;
      > div {
        width: 30%;
        float: left;
        white-space: nowrap;
        :nth-child(1) {
          display: inline-block;
          width: 130px;
          padding-left: 30px;
        }
        :nth-child(2) {
          color: #808080;
        }
      }
    }
  }
  .zhengshu {
    .title {
      display: inline-block;
      width: 130px;
      padding-left: 30px;
      line-height: 50px;
      color: #666666;
    }
  }
}
.cardtitle {
  font-size: 16px;
  color: #6e6e6e;
  font-weight: 600;
}
.box_shadow {
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>